<template>
	<!-- 发请求  拿数据 存本地  做展示 -->
	<view style="display: flex;">
		<!-- 左侧 -->
		<scroll-view
			scroll-y
			style="width: 30%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="heroList"
		>
			<view
				class="item"
				:class="{ cur: current == index }"
				v-for="(item, index) in heroList"
				:key="index"
				@click="doCheck(index)"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<!-- 右侧 -->
		<scroll-view
			scroll-y
			style="width: 70%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="heroDetails"
		>
			<!-- 英雄简介 -->
			<view style="display: flex;">
				<image
					:src="
						`http://game.gtimg.cn/images/lol/act/img/champion/${
							heroInfo.alias
						}.png`
					"
					style="width: 180rpx;height: 180rpx;"
				></image>
				<!-- <image
					src="../../static/icons/icon3.png"
					style="width: 200rpx;height: 200rpx;"
				></image> -->
				<view style="display: flex;flex-direction: column;">
					<!-- 名称 -->
					<view style="font-size: 1.2em;">{{ heroInfo.title }}</view>
					<!-- 昵称 -->
					<view>昵称:{{ heroInfo.name }}</view>
					<!-- 金币 -->
					<view>金币:{{ heroInfo.goldPrice }}</view>
					<!-- 点券 -->
					<view>点券:{{ heroInfo.couponPrice }}</view>
				</view>
			</view>
			<!-- 背景故事 -->
			<uni-card title="背景故事">
				<view>{{ heroInfo.shortBio }}</view>
			</uni-card>
			<!-- 使用建议 -->
			<uni-collapse>
				<uni-collapse-item title="使用建议">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in heroInfo.allytips"
							:key="index"
							:title="item"
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 对战技巧 -->
			<uni-collapse>
				<uni-collapse-item title="对战技巧">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in heroInfo.enemytips"
							:key="index"
							:title="item"
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 皮肤 -->
			<uni-collapse>
				<uni-collapse-item title="皮肤">
					<uni-grid :column="3" :showBorder="false" :highlight="false">
						<uni-grid-item
							v-for="(item, index) in heroDetails.skins"
							:key="index"
						>
							<image
								:src="item.iconImg"
								style="width: 100rpx;height: 100rpx;border-radius: 6rpx;"
							></image>
						</uni-grid-item>
					</uni-grid>
				</uni-collapse-item>
			</uni-collapse>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			heroList: null,
			// 当前点中的菜单索引
			current: 0,
			// 英雄详细信息
			heroDetails: null
		};
	},
	mounted() {
		// 可插拔的配置
		this.getHeroList();
	},
	methods: {
		doCheck(index) {
			this.current = index;
			// 请求英雄的信息
			this.getHeroDetails(this.heroList[index].heroId);
		},
		// 英雄详情
		getHeroDetails(heroId) {
			const url = `https://game.gtimg.cn/images/lol/act/img/js/hero/${heroId}.js`;
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.heroDetails = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 英雄列表
		getHeroList() {
			const url =
				'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=50';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.heroList = res.data.hero;
					// 默认调用第一个英雄的详细信息
					this.getHeroDetails(this.heroList[0].heroId);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		windowHeight() {
			return uni.getSystemInfoSync().windowHeight;
		},
		heroInfo() {
			// console.log(this.heroDetails.hero);
			return this.heroDetails.hero;
		}
	}
};
</script>

<style lang="scss">
.item {
	padding: 15px;
	text-align: center;
	border-bottom: 1px solid #d3d3d3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	&.cur {
		background-color: #b5b8bd;
		color: #007aff;
		font-weight: bold;
	}
}
</style>
